<template>
  <div class="tabs">
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      size="small"
      :closable="tag.name !== 'HomePage'"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
      @click="changeMenu(tag)"
      @close="handleClose(tag, index)"
    >
      {{ tag.meta.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  computed: {
    ...mapState({
      // 通过简写的方式，从 vuex 中获取 tabsList 数组中的数据，并在 html 标签中使用 v-for 渲染
      tags: (state) => state.crumbsData.tabsList,
    }),
  },
  methods: {
    ...mapMutations({
      // 当点击 tag 标签上的关闭符号的时候，调用该方法，删除 vuex 中的对应元素
      close: "crumbsData/closeTab",
    }),
    changeMenu(item) {
      // 更据渲染时候，预留好的属性，进行路由跳转
      this.$router.push({ name: item.name });
      // 做头部面包屑导航
      this.$store.commit("crumbsData/selectMenu", item);
    },

    handleClose(tag, index) {

      // 定义一个长度 -- vuex 中的 tabsList 的数组长度
      let length = this.tags.length - 1;

      // 调用 vuex 中的方法 将点击对象的 name 传递给vuex 删除当前对象
      this.close(tag);
      // 判断是否是最后一个

      // 第一种情况
      if (tag.name !== this.$route.name) {
        return;
      }

      if (index === length) {
        // 往左边跳转
        this.$router.push({
          name: this.tags[index - 1].name,
        });
      } else {
        // 往右边跳转
        this.$router.push({ name: this.tags[index].name });
      }
    },
  },
};
</script>
<style lang="scss">
.tabs {
  padding: 20px;

  .el-tag {
    margin-right: 15px;
    cursor: pointer;
  }
}
</style>
